<template>
  <div class="w-card content-box">
    <div class="title-box">
      <span>号卡商品列表</span>
      <el-button style="margin-left:auto;" type="primary" icon="Plus" @click="addGoods">新增号卡商品</el-button>
    </div>
    <el-tabs style="margin-top: 10px;" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="在售商品" :name="1">
        <sale-goods-vue v-if="activeName == 1" />
      </el-tab-pane>
      <el-tab-pane label="下架商品" :name="2">
        <un-shelf-goods-vue v-if="activeName == 2" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import saleGoodsVue from '../components/saleGoods.vue'
import unShelfGoodsVue from '../components/unShelfGoods.vue'
import { useRouter } from 'vue-router'

export default {
  components: {
    saleGoodsVue,
    unShelfGoodsVue,
  },
  setup() {
    const router = useRouter()

    const state = reactive({
      activeName: 1,
    })

    function addGoods() {
      router.push({ path: '/goodsManage/cardGoods/editGoods' })
    }

    return {
      ...toRefs(state),
      addGoods,
    }
  }
}
</script>

<style lang="scss" scoped>
.content-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
  .title-box {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
}
:deep(.el-tabs__nav) {
  margin-left: 40px;
}
</style>